/* eslint-disable @typescript-eslint/no-var-requires */
/**
 * vue配置文件 | 吕静
 *
 * https://cli.vuejs.org/zh/config/
 *
 */
const path = require('path')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.ts',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'NIHSS评分系统',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  // eslint-loader 是否在保存的时候检查
  lintOnSave: process.env.NODE_ENV !== 'production',
  // 是否使用包含运行时编译器的Vue核心的构建,https://www.jianshu.com/p/466510d84e36
  // 个人理解： 运行时编译，效率和开销都有点大了。所以推荐使用vue-loader这种事先编译好，
  // 等运行时，仅仅是一个小的可怜不需要编译的js文件了。而runtimeCompiler仅仅是让你用不用template的解析器而已
  runtimeCompiler: false,
  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],
  // 生产环境 sourceMap
  productionSourceMap: false,
  // cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
  // corsUseCredentials: false,
  // webpack 配置，键值对象时会合并配置，为方法时会改写配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  // webpack 链接 API，用于生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: new RegExp(
              '\\.(' + productionGzipExtensions.join('|') + ')$'
            ),
            threshold: 10240,
            minRatio: 0.8
          })
        ],
        optimization: {
          splitChunks: {
            chunks: 'all'
          }
        },
        performance: {
          hints: false
        }
      }
    }
  },
  chainWebpack: (config) => {
    // 优化打包
    // config.plugin('webpack-bundle-analyzer')
    //   .use(BundleAnalyzerPlugin)
    //   .init(Plugin => new Plugin())

    config.resolve.alias
      .set('@', resolve('src'))
      .set('@api', resolve('src/server'))
      .set('@tpls', resolve('src/components'))
      .set('@style', resolve('src/style'))
      .set('@img', resolve('src/assets/imgs'))
      .set('@cg', resolve('src/config'))
      .set('@views', resolve('src/views'))
      .set('@assets', resolve('src/assets'))
  },
  devServer: {
    // host: 'localhost'
    host: '192.168.1.109'
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // resolve('src/style/vars.less')
        resolve('src/style/theme/variables.less')
      ]
    }
  },
  css: {
    loaderOptions: {
      // loader-less 5.0版本
      less: {
        modifyVars: {
          'primary-color': '#0044FF',
          'link-color': '#0044FF',
          'border-radius': '2px'
        },
        javascriptEnabled: true
      },
      // css: {},
      // postcss: {
      //   plugins: {
      //     autoprefixer: {},
      //     'postcss-px2rem-exclude': {
      //       remUnit: 37.5,
      //       exclude: '/node_modules|floder_name/i'
      //     }
      //   }
      // }
    }
  }
}
